<template>
    <div>
        <brand></brand>
        <div id="container" v-show="isShow">
            <div id="out">
                <div class="close" @click="isShow = false">×</div>
                <div id="subname">修改专业名称</div>
                <div id="title">
                    <span>专业名称: &nbsp;</span>
                    <span
                        ><input type="text" v-model="updateSubjectName"
                    /></span>
                </div>
                <div id="btn">
                    <button @click="isShow = false" class="cancel">取消</button>
                    <button @click="updateSubject(updateSubjectId,updateSubjectName)">确认</button>
                </div>
            </div>
        </div>
        <div id="box">
            专业名称：
            <input type="text" class="input" v-model="input" />
            <button @click="addSubject()">新增专业</button>
        </div>
        <div>
            <table border="1">
                <thead>
                    <th>编号</th>
                    <th>名称</th>
                    <td>操作</td>
                </thead>
                <tbody>
                    <tr v-for="item in subjectsData" :key="item._id">
                        <td>{{ item._id }}}</td>
                        <td>{{ item.name }}</td>
                        <td>
                            <a class="lookup" href="#" @click.prevent="lookUp()"
                                >查看</a
                            >
                            <a
                                class="update"
                                href="#"
                                @click.prevent="
                                    getupdateSubject(
                                        item._id,
                                        item.name
                                    )
                                "
                                >修改</a
                            >
                            <a
                                class="del"
                                href="#"
                                @click.prevent="delSubject(item._id)"
                                >删除</a
                            >
                        </td>
                    </tr>
                </tbody>
            </table>
            <div id="page">
                <span>共 {{ total }} 条</span>
                <select name="" id="" v-model="pageSize">
                    <option value="10">10条/每页</option>
                    <option value="5">5条/每页</option>
                    <option value="15">15条/每页</option>
                    <option value="20">20条/每页</option>
                </select>
                <button class="target" @click="currentPage = 1">首页</button>
                <button
                    @click="prePage()"
                    :class="{ disabled: currentPage == 1 }"
                >
                    &lt;
                </button>
                <span>{{ currentPage }}</span>
                <button
                    @click="nextPage()"
                    :class="{ disabled: currentPage == totalPages }"
                >
                    &gt;
                </button>
                <button class="target" @click="currentPage = totalPages">
                    尾页
                </button>
                <span>{{ currentPage }} / {{ totalPages }}</span>
                <!-- <span>前往</span>
      <input type="text" value="1" @blur="toPage()" v-model="goPage">
      <span>页</span> -->
            </div>
        </div>
    </div>
</template>

<script>
import brand from "../common/brand.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapGetters, mapActions, mapMutations } =
    createNamespacedHelpers("subjects");

export default {
    watch: {
        // currentPage:{
        //   handler(){
        //     console.log(this.currentPage);
        //     this.getSubjectsAsync(this.pageSize,this.currentPage);
        //   },
        // },
        pageSize: {
            handler() {
                this.currentPage = 1;
                this.getSubjectsAsync(this.pageSize, this.currentPage);
            },
        },
    },
    data() {
        return {
            input: "",
            pageSize: "10",
            currentPage: "1",
            updateSubjectName: "",
            updateSubjectId:'',
            isShow: false,
        };
    },
    components: {
        brand,
    },
    // computed:{
    //     subjectsData(){
    //         return this.$store.state.subjectsData;
    //     }
    // },
    computed: {
        ...mapState(["subjectsData", "total", "totalPages"]),
    },
    created() {
        // this.$store.dispatch('getSubjectAsync');
        this.getSubjectsAsync(this.pageSize, this.currentPage);
    },
    methods: {
        ...mapMutations(["SET_SUBJECTS"]),
        ...mapActions([
            "getSubjectsAsync",
            "addSubjectAsync",
            "delSubjectAsync",
            "updateSubjectAsync",
        ]),

        //新增专业
        async addSubject() {
            const data = await this.addSubjectAsync(this.input);
            if (data.code) {
                alert("新增成功！");
                this.getSubjectsAsync(this.pageSize, this.currentPage);
            } else {
                alert("新增失败！");
            }
        },

        //删除专业
        async delSubject(id) {
            const data = await this.delSubjectAsync(id);
            if (data.code) {
                alert("删除成功！");
                this.getSubjectsAsync(this.pageSize, this.currentPage);
            } else {
                alert("删除失败！");
            }
        },

        //获取要修改的专业
        async getupdateSubject(id, name) {
            this.isShow = true;
            this.updateSubjectName = name;
            this.updateSubjectId = id;
        },
        //修改专业
        async updateSubject(_id,name){
          // console.log(name);
          const data = await this.updateSubjectAsync({_id,name});
            if(data.code){
              alert('修改成功！');
              this.getSubjectsAsync(this.pageSize,this.currentPage);
              this.isShow = false;
            }else{
              alert(data.message);
            }
        },

        prePage() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.getSubjectsAsync(this.pageSize, this.currentPage);
            }
        },
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
                this.getSubjectsAsync(this.pageSize, this.currentPage);
            }
        },
        lookUp() {
            console.log("查看");
        },
    },
};
</script>

<style scoped lang='scss'>
#container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.3);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    // display: none;
}
#out {
    // width: 550px;
    // height: 250px;
    background-color: #fff;
    padding: 20px 30px;
    .close{
      position: relative;
      top: 0;
      right: 10px;
    }
}
#subname {
    font-size: 18px;
    padding: 5px 0;
}
#title {
    padding: 40px 0px;
    padding-left: 20px;
    position: relative;
    input {
        width: 450px;
        height: 36px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 0;
        padding-left: 10px;
        margin: 0;
        outline: none;
    }
    input:focus {
        border: 1px solid #2f54eb;
        box-shadow: 0px 0px 0 1px #bde7ff, 0px 0px 0 1px #bde7ff;
    }
}
#btn {
    padding-top: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    button {
        width: 70px;
        height: 40px;
        color: #fff;
        margin-left: 15px;
        background-color: #2f54eb;
        &:hover {
            background-color: #5976ef;
        }
    }
    .cancel {
        background-color: #ffffff;
        border: 1px solid #dcdfe6;
        color: #000;
        margin-left: 20px;
        &:hover {
            background-color: #eaeefd;
            color: #2f54eb;
        }
    }
}
#box {
    text-align: center;
    margin-bottom: 20px;
    select {
        width: 270px;
        height: 36px;
        padding-left: 2px;
        outline: none;
        margin-right: 13px;
        border: 1px solid #dedede;
        border-radius: 4px;
    }
    .input {
        width: 260px;
        height: 32px;
        padding-left: 8px;
        outline: none;
        margin-right: 20px;
        border: 1px solid #dedede;
        border-radius: 4px;
    }
    input:focus {
        border: 1px solid #2f54eb;
        box-shadow: 0px 0px 0 1px #bde7ff, 0px 0px 0 1px #bde7ff;
    }
}
table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-collapse: collapse;
    tr {
        cursor: pointer;
        &:hover {
            background-color: #f5f7fa;
        }
    }
    th,
    td {
        height: 50px;
        width: 25%;
        text-align: center;
        // color: #909399;
        &:last-child {
            width: 300px;
        }
        &:first-child {
            width: 350px;
        }
    }
    a {
        display: inline-block;
        text-decoration: none;
        width: 56px;
        height: 30px;
        line-height: 30px;
        margin: 0 4px;
        border-radius: 3px;
        font-size: 14px;
    }
    .lookup {
        background-color: #2f54eb;
        color: #fff;
        &:hover {
            background-color: #5976ef;
        }
    }
    .update {
        border: 1px solid #dcdfe6;
        &:hover {
            background-color: #eaeefd;
        }
    }
    .del {
        background-color: #f56c6c;
        color: #fff;
        &:hover {
            background-color: #f78989;
        }
    }
}
select {
    width: 70px;
    height: 36px;
    padding-left: 2px;
    outline: none;
    margin-right: 13px;
    border: 1px solid #dedede;
    border-radius: 4px;
}
button {
    width: 80px;
    height: 35px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}
button:hover {
    background-color: rgb(73, 73, 245);
    color: white;
}
#page {
    margin-top: 15px;
    span {
        margin: 0 8px;
        font-size: 15px;
    }
    select {
        width: 100px;
        height: 30px;
        text-align: center;
    }
    button {
        width: 30px;
        height: 30px;
        margin: 5px;
    }
    .target {
        width: 50px;
    }
    .disabled {
        cursor: not-allowed;
        &:hover {
            background-color: #efefef;
            color: #000;
        }
    }
    // input{
    //   width: 45px;
    //   height: 28px;
    //   text-align: center;
    //   outline: none;
    //   padding: 0;
    //   border: 1px solid #dcdfe6;
    //   border-radius: 2px;
    // }
}
</style>